<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>交通气象大数据服务平台</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
</head>

<body>
    <div id="map">
        <div class="map-title">
            <span>交通气象大数据服务平台</span>
            <div id="warning-info">预警信息</div>
            <div class="sign">
                <div class="sign-in">登录</div>
                <div class="sign-up">注册</div>
            </div>
        </div>
        <div class="octagon-box" id="incident-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span>交通事件统计</span>
            </div>
            <div id="incident-chart"></div>
        </div>
        <div class="octagon-box" id="congestion-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span>道路拥堵指数TOP 10</span>
            </div>
            <div id="congestion-chart"></div>
        </div>
        <div class="octagon-box" id="weather-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span>天气预报</span>
            </div>
            <div id="weather-chart"></div>
        </div>
        <div class="octagon-box" id="road-weather-info">
            <img src="./img/corner1.png" class="octagon-box-corner1">
            <img src="./img/corner2.png" class="octagon-box-corner2">
            <img src="./img/corner3.png" class="octagon-box-corner3">
            <img src="./img/corner4.png" class="octagon-box-corner4">
            <div class="octagon-box-border-top octagon-box-border"></div>
            <div class="octagon-box-border-bottom octagon-box-border"></div>
            <div class="octagon-box-title">
                <span>道路天气TOP 10</span>
            </div>
            <div id="road-weather-chart"></div>
        </div>
        <div class='search-box'>
            <input id='search-input' type='text' placeholder=' 道路 / 区域搜索' autocomplete="off" />
            <img src="./img/search.png" class="search-icon">
        </div>
        <div class="weather-switch">
            <div class="weather-switch-selected" id="road-condition-button">实时路况</div>
            <div class="weather-switch-not-selected" id="tem-button">温度</div>
            <div class="weather-switch-not-selected" id="wins-button">风力</div>
            <div class="weather-switch-not-selected" id="rh-button">能见度</div>
            <div class="weather-switch-not-selected" id="pre-button">降水量</div>
            <div class="weather-switch-selected" id="incident-button">
                <img src="./img/ic_event_n.png" id="incident-button-not" style="vertical-align: text-bottom;display:none">
                <img src="./img/ic_event_p.png" id="incident-button-sel" style="vertical-align: text-bottom">                
                <span>事件</span>
            </div>
        </div>
        <div id="timeline-box"></div>
        <div id="legend"></div>
        <div id="loading">
            <img src="./img/ring-alt.gif" alt="Loading">
        </div>
    </div>
    <script src="//minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <script src="//minedata.cn/minemapapi/demo/js/echarts-all-3.js"></script>
</body>

</html>